選定武器之後，我們就準備要來開疆闢地了！...等等！

雖然已經決定好要使用 Playwright，但 Playwright 支援多語言，到底要用哪個語言來編寫測試腳本呢？

Playwright 最初是以 TypeScript 撰寫的 Node.js library，基於此，Node.js 環境下的更新速度與功能支援最為及時，為了與前端工程師保持更順暢的技術溝通，選擇 JavaScript 或 TypeScript 皆具備高度便利性；再加上團隊的新專案本身即以 TypeScript 開發，最終決定以 TypeScript 作為 Playwright 測試的主要語言。

現在開始初始化我們的專案吧！

建立全新專案

打開專案資料夾後，可以使用 npm、yarn 或 pnpm 來安裝 Playwright，這邊選擇以 npm 來安裝，如果是在一個新的專案，可使用以下指令安裝：

npm init playwright@latest

第一次執行時可能會先跳出以下內容：

Need to install the following packages:
create-playwright@1.17.136
Ok to proceed? (y)

輸入y以繼續執行，接著可依據需求選擇適合的安裝選項：

設置選項：

選擇使用 TypeScript 或 JavaScript？ → TypeScript
要將E2E測試案例放在哪裡？ → 預設 tests 資料夾
是否加入 GitHub Actions 工作流？ → 如果確定使用 GitHub CI 流程請選擇 True
安裝 Playwright 瀏覽器？ → 預設 是

稍微等待一點時間，執行完成後會建立一個 Playwright 專案結構，建立的檔案結構如下：

tests
  ├── example.spec.ts  // 官方提供的基本測試案例
tests-examples
  ├── demo-todo-app.spec.ts  // 更多其他測試範例(以 todo 應用程式為例)
.gitignore
package.json
package-lock.json  // 或 yarn.lock / pnpm-lock.yaml
playwright.config.ts  // 測試配置

建立的檔案當中，Playwright 提供了兩個測試案例檔案，如果不需要可以整個刪除。

• 在現有專案內加入 Playwright

如果只是要在現有專案內安裝 Playwright，則可以輸入：

npm install -D @playwright/test

執行完畢後再輸入以下指令來安裝瀏覽器：

npx playwright install

config 設定檔

playwright.config.ts 是 Playwright 的設定檔，以下是預設內容：

import { defineConfig, devices } from '@playwright/test';

export default defineConfig({
  testDir: './tests',  // 測試檔案放置目錄
  fullyParallel: true,  // 所有測試以平行方式執行
  forbidOnly: !!process.env.CI,  // 若在原始碼中遺留 test.only，在 CI 會直接失敗
  retries: process.env.CI ? 2 : 0,  // 在 CI 環境失敗測試會 retry 2 次，本地端環境不 retry
  workers: process.env.CI ? 1 : undefined,  // 在 CI 環境不使用平行測試 (只有單一 worker)，本地端可平行測試
  reporter: 'html',  // 報告輸出格式為 html
  use: {
    // baseURL: 'http://localhost:3000',  // 預設 URL，測試中可直接用「/」代表此 baseURL
    trace: 'on-first-retry',  // 測試失敗重試時才會收集追蹤紀錄
  },
  projects: [
    {
      name: 'chromium',  // Project 名稱
      use: { ...devices['Desktop Chrome'] },  // 使用裝置 / 瀏覽器
    },
    {
      name: 'firefox',
      use: { ...devices['Desktop Firefox'] },
    },
    {
      name: 'webkit',
      use: { ...devices['Desktop Safari'] },
    },
    
    ...
    
  ],
  // webServer: {
  //   command: 'npm run start',  // 啟動本地伺服器的指令
  //   url: 'http://localhost:3000',  // 測試要連線的目標網址
  //   reuseExistingServer: !process.env.CI,  // 在 CI 環境會強制啟動新伺服器，本地端開發則重複使用伺服器
  // },
});

除了上述預設的項目外，Playwright 的 config 檔還提供了更多強大且靈活的設定選項，這些進階應用將在後續文章中陸續分享。

到這裡，我們已經成功建立了 Playwright 測試基地！接下來，在 Day 4 將會介紹 Playwright 執行測試的 4 種方式：CLI / Debug / UI / Extension。